{% extends "base.html" %}

{% block css %}
    <link href="/css/chess.css" type="text/css" rel="Stylesheet"/>
{% endblock %}
{% block script %}
<script type="text/javascript" src="/javascript/chess.js"></script>
<script type="text/javascript" src="/javascript/game.js"></script>
<script type="text/javascript" src="/javascript/chat.js"></script>
<script type="text/javascript">
  game.gameKey = "{{game_key}}";
</script>
{% endblock %}

{% block header %}
<div class="header">
  <a href="/">الصفحة الرئيسية</a>
  &nbsp; &nbsp;
  <a href="/lobby">ساحة اللعب</a>
</div>
{% endblock %}

{% block logo %}
  <div class="title">تحميل اللعبة من السيرفر ...</div>
{% endblock %}
{% block content %}
  <img class="busy" src="/images/spin32.gif"/>
  <div class="waitingForOpponent" style="display:none">
    انتظار خصمك..
  </div>
  <div class="yourTurn" style="display:none">
    دورك ياحبيب!
    &nbsp;<a class="btn" id="resignGame">بدي انسحب</a>
    &nbsp;<a class="btn" id="offerDraw">شو رأيك نحسبو تعادل؟</a>
  </div>
  <div class="gameOver" style="display:none">
    &nbsp;
  </div>
  <div class="statusTop" style="display:none">
    <div class="blackHeader">
      <div class="hdrLeft">
        <span id="blackIndicator">&gt;</span>
        <img src="/images/black_king.gif"/>
        <span id="blackPlayer">&nbsp;</span>
      </div>
      <div class="hdrRight">
        <div class="timeDisplay" style="display:none">
          <span id="blackTime">&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
  <div class="gameBoard"> </div>
  <div class="statusBottom" style="display:none">
    <div class="whiteHeader">
      <div class="hdrLeft">
        <span id="whiteIndicator">&gt;</span>
        <img src="/images/white_king.gif"/>
        <span id="whitePlayer">&nbsp;</span>
      </div>
      <div class="hdrRight">
        <div class="timeDisplay" style="display:none">
          <span id="whiteTime">&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
  <div class="chatGroup" style="display:none">
    <div class="chat">
    </div>
    وشوشة خاصة: <input type="text" id="chatInput" style="width:60%">
    <a class="btn" id="sendGameChat">إرسال</a>
  </div>
  <div class="templates">
  <div class="piece rook white"></div>
  <div class="piece knight white"></div>
  <div class="piece bishop white"></div>
  <div class="piece queen white"></div>
  <div class="piece king white"></div>
  <div class="piece pawn white"></div>
  <div class="piece rook_black black"></div>
  <div class="piece knight_black black"></div>
  <div class="piece bishop_black black"></div>
  <div class="piece queen_black black"></div>
  <div class="piece king_black black"></div>
  <div class="piece pawn_black black"></div>
  <div class="piece blank"></div>
  </div>

  <div id="acceptDrawDialog" class="dialogContent">
    <div class="dialogTitle">بتقبل نحسب الدق تعادل؟</div>
    <div class="dialogBody">
      قال شريكك عم يعرض عليك التعادل<br/><br/>
      بتقبل عرض التعادل؟
    </div>
    <div  class="buttonBar">
      <a class="btn" id="acceptDraw">أي خليها تعادل</a>
      <a class="btn" id="rejectDraw">مابقبل و بدي اهزمو شر هزيمة</a>
    </div>
  </div>

  <div id="drawRefusedDialog" class="dialogContent">
    <div class="dialogTitle">رفض التعادل</div>
    <div class="dialogBody">
      الظاهر صاحبك متنح و موراضي غير يهزمك شر هزيمة
    </div>
    <div  class="buttonBar">
      <a class="btn" id="closeModal">OK</a>
    </div>
  </div>

<div id="promoteDialog" class="dialogContent">
  <div class="dialogTitle">رقي هالجندي</div>
  <div class="dialogBody">
    <form id="promoteForm">
      <label>اختار قطعة جديدة:</label></br>
      <div class="radioGroup">
        <input type="radio" checked="checked" name="promote" value="1" />وزير<br/>
        <input type="radio" name="promote" value="2"/>قلعة<br/>
        <input type="radio" name="promote" value="3"/>فيل<br/>
        <input type="radio" name="promote" value="4"/>حصان<br/>
      </div>
    </form>
    <div  class="buttonBar">
      <span>
        <a class="btn" id="doPromote">ترقية</a>
        &nbsp;
        <a class="btn" id="closeModal">إلغاء</a>
      </span>
    </div>
  </div>
</div>
{% endblock %}
